{% extends "page_base.html" %}

{% block content %}

<!-- CSS Files -->
<link type="text/css" href="/stylesheets/themes/blitzer/jquery-ui-1.8.2.custom.css" rel="stylesheet" />
<link type="text/css" href="/stylesheets/pagination.css" rel="stylesheet" />
<link type="text/css" href="/stylesheets/author_network.css" rel="stylesheet" />



<!-- Pagination-->
<script type="text/javascript" src="/scripts/ui/jquery.pagination.js"></script> 

<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="/scripts/jit.js"></script>

<!-- Plotting File -->
<script language="javascript" type="text/javascript" src="/scripts/author_network.js"></script>


<!-- center container for graph -->
<div id="center-container">
	<div class="instructions">
		<ul>
			<li>Drag the graph to move around. Scroll to zoom in/out.</li>
			<li>To center a node, click on it on the graph, or select it from the "Focus" field and click the "Focus" button.</li>
			<li>The "Remove Branches" button will remove all the nodes but the centered one and those adjacent to it.</li>
			<li>Try finding an author from the database by autocompletion or lucene search.</li>
			<li>Refresh the page to see another random author.</li>
		</ul>
	</div>
    <div id="infovis"></div>
</div>

<!-- right container for information display -->
<div class="ui-widget" id="right-container">
	<div id="navigation-container">	
		<div id="log">Done</div>
		<div id="navigation"></div>	
	</div>
	
	<div id="fieldset-container">
		<FIELDSET>
			<LEGEND>Focus</LEGEND>
			Select a node <SELECT name="focusSelect" id="focusSelect"></SELECT> <BR/>
			<button class="focusButton" id="focusButton">Focus</button>
			<button class="removeButton" id="removeBranchesButton">Remove Branches</button>
		</FIELDSET>
		
		<FIELDSET>
			<LEGEND>Search</LEGEND>
			<input id="searchAuthor" />
			<button class="searchButton" id="searchButton">Search</button>	
			<button class="toggleButton" id="search_results_toogleButton">[+]</button>
			<br/><br/>
			<div id="search_results_container">
				<div class="data_holder" id="pagination_data_holder"></div>
				<div id="paging_container"></div>
				<br style="clear:both;" /><br/>
				<div id="searchResults">
					<table id="search_results_table" class="data_table" style="vertical-align: middle"></table>
				</div>
			</div>
		</FIELDSET>
		
	
		<FIELDSET>
			<LEGEND>MSC2010 <button class="toggleButton" id="msc_toggleButton">[+]</button></LEGEND>
			<div id="msc_table_container" class="table_container">
			<TABLE id="msc_table" class="data_table">
				<thead>
					<tr><th>Tag</th><th>Subject</th><th>Count</th></tr>
				</thead>
				<tbody></tbody>
			</TABLE>
			</div>
		</FIELDSET>
	
		<FIELDSET>
			<LEGEND>Coauthors <button class="toggleButton" id="coauthor_toggleButton">[-]</button></LEGEND>
			<div id="coauthor_table_container" class="table_container toggled">
			<TABLE id="coauthor_table" class="data_table">
				<thead>
					<tr><th>Name</th><th>Count</th></tr>
				</thead>
				<tbody></tbody>
			</div>
			</TABLE>
		</FIELDSET>
	</div>
</div>

<div id="data_holder" class="data_holder" style="display: none"></div>



{% endblock %}